<template>
  <u-popup :closeOnClickOverlay="false" :show="show" mode="center" @close="closeHandle" bgColor="transparent">
    <!-- 裂变弹窗 -->
    <view class="yiyuan-lb-container">
      <view class="img-bg-wrapper">
        <image class="img-bg" :src="staticImgs.bg" mode=""></image>
      </view>
      <view class="yiyuan-lb-modal-position">
        <view class="yiyuan-lb-modal">
          <view class="btn-group-wrapper">
            <view class="btn-l" :style="{'background-image':`url(${staticImgs.btnImg1})`}" @click="leftClick">继续支付
            </view>
            <view :style="{'background-image':`url(${staticImgs.btnImg2})`}" class="btn-r" @click="rightClick">
              <view class="text-1">3.9元购买</view>
              <view class="text-2">（原价39元）</view>

              <view class="abs-tip" :style="{'background-image':`url(${staticImgs.btnImgTip})`}">80%人选择</view>

              <view class="other-tip">仅一次机会</view>
            </view>
          </view>

        </view>
      </view>
    </view>
  </u-popup>
</template>

<script>
  export default {
    props: {
      visible: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      visible(val) {
        this.show = val
      }
    },
    data() {
      return {
        staticImgs: {
          bg: this.imgBaseURL + '/scl/yiyuan-modal/yiyuan-lb-modal-bg.png',
          btnImg1: this.imgBaseURL + '/scl/yiyuan-modal/yiyuan-lb-modal-btn-1.png',
          btnImg2: this.imgBaseURL + '/scl/yiyuan-modal/yiyuan-lb-modal-btn-2.png',
          btnImgTip: this.imgBaseURL + '/scl/yiyuan-modal/yiyuan-lb-modal-btn-tip.png',
        },
        show: false,
      }
    },
    methods: {
      initModalData() {
        this.$u.api.sclOneGoods().then(res => {
          // this.goods = res
          console.log(res, '------this.$u.api.sclOneGoods--')
        })
      },
      closeHandle() {
        this.show = false
      },
      leftClick() {
        const that = this
        const arr = this.$SUBSCRIBE_CODES
        uni.getSetting({ //getSetting获取用户的当前设置
          withSubscriptions: true,
          success: res => {
            console.log('res >>>>', res);
            if (res.subscriptionsSetting.mainSwitch &&
              res.subscriptionsSetting &&
              res.subscriptionsSetting[arr[0]] == 'accept' &&
              res.subscriptionsSetting[arr[1]] == 'accept' &&
              res.subscriptionsSetting[arr[2]] == 'accept') {
              that.$emit('leftClick')
            } else {
              uni.requestSubscribeMessage({
                tmplIds: arr,
                success(res) {
                  console.log('成功');
                  that.$emit('leftClick')
                },
                fail(res) {
                  console.log('失败');
                  that.$emit('leftClick')
                }
              })
            }
          }
        })

      },
      rightClick() {
        const that = this
        const arr = this.$SUBSCRIBE_CODES
        uni.getSetting({ //getSetting获取用户的当前设置
          withSubscriptions: true,
          success: res => {
            console.log('res >>>>', res);
            if (res.subscriptionsSetting.mainSwitch &&
              res.subscriptionsSetting &&
              res.subscriptionsSetting[arr[0]] == 'accept' &&
              res.subscriptionsSetting[arr[1]] == 'accept' &&
              res.subscriptionsSetting[arr[2]] == 'accept') {
              that.$emit('rightClick')
            } else {
              uni.requestSubscribeMessage({
                tmplIds: arr,
                success(res) {
                  console.log('成功');
                  that.$emit('rightClick')
                },
                fail(res) {
                  console.log('失败');
                  that.$emit('rightClick')
                }
              })
            }
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .yiyuan-lb-container {
    width: 650rpx;
    height: 698rpx;
    // background-color: red;
    position: relative;

    .img-bg-wrapper {
      display: flex;
      justify-content: center;
      position: absolute;
      z-index: 999;
      top: 0;
      left: 0;
      right: 0;

      .img-bg {
        width: 650rpx;
        height: 698rpx;
        margin: auto;
      }
    }

    .yiyuan-lb-modal-position {
      position: absolute;

      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 999;
      padding-bottom: 50rpx;

      .yiyuan-lb-modal {
        // padding-top: 140rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        height: 100%;

        .other-tip {
          position: absolute;
          left: 130rpx;
          top: 98rpx;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 800;
          font-size: 26rpx;
          color: #FFFFFF;
          line-height: 37rpx;
          text-align: right;
          font-style: normal;

          display: flex;
          width: 100%;
          // align-items: flex-end;
          // justify-content: flex-end;

        }

        .btn-group-wrapper {
          display: flex;
          align-items: center;
          justify-content: center;

          .btn-l {
            width: 240rpx;
            height: 112rpx;
            line-height: 112rpx;
            text-align: center;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 34rpx;
            color: #941B24;
            // line-height: 48rpx;
            // text-align: left;
            font-style: normal;

            background-repeat: no-repeat;
            background-size: 100%;
          }

          .btn-r {
            background-repeat: no-repeat;
            background-size: 100%;
            position: relative;

            display: flex;
            align-items: center;
            justify-content: center;

            width: 390rpx;
            height: 112rpx;

            .text-1 {
              font-family: PingFang-SC, PingFang-SC;
              font-weight: 800;
              font-size: 34rpx;
              color: #941B24;
              line-height: 48rpx;
              text-align: left;
              font-style: normal;
            }

            .text-2 {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #CB5D65;
              line-height: 33rpx;
              text-align: center;
              font-style: normal;
            }

            .abs-tip {
              position: absolute;
              top: -30rpx;
              left: 16rpx;
              width: 180rpx;
              height: 68rpx;

              line-height: 66rpx;


              font-family: PingFang-SC, PingFang-SC;
              font-weight: 800;
              font-size: 26rpx;
              color: #FF616B;
              // line-height: 37rpx;
              text-align: center;
              font-style: normal;

              background-repeat: no-repeat;
              background-size: 100%;
            }
          }

        }
      }

    }

  }
</style>